<style scoped>
    @import "../styles/detail.css";
</style>
<template>
    <div class="page-wrap page-detail" id="page-calculation">
        <div class="g-body">
            <div class="m-calc">
                <header-component :page-name="pageName">
                    <a class="m-calc-viewIntroBtn" href="javascript:;" data-show="#calcTip" @click="showCalc=true">计算方式</a>
                </header-component>

                <div class="g-wrap">
                    <div class="m-calc-rule">
                        <h2>计算公式</h2>
                        <p>[ 数值A ÷ 商品所需人次 ] 取余数 + 10000001</p>
                    </div>
                    <div class="m-calc-A">
                        <p class="m-calc-A-title">数值A</p>
                        <p>= 截止该商品开奖时间点前最后50条全站参与记录</p>
                        <p>= <b class="txt-red">{{data.time_sum}}</b></p>
                        <a class="txt-blue btn m-calc-A-unfoldBtn" href="javascript:;" style="display: block;" v-show="!show" @click="show=true">展开<i class="ico ico-sortArrow ico-sortArrow-down ico-sortArrow-gray"></i></a>
                        <a class="txt-blue btn m-calc-A-foldBtn" style="display: none;" href="javascript:;" v-show="show" afmoldstyle="block" @click="show=false">收起<i class="ico ico-sortArrow ico-sortArrow-up ico-sortArrow-gray"></i></a>
                    </div>
                    <div class="m-calc-list" v-show="show">
                        <table class="m-calc-resultList" cellpadding="0" cellspacing="0">
                            <thead>
                            <tr>
                                <th class="time">拼宝时间</th>
                                <th class="user">用户帐号</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr class="calcRow" v-for="(k,i) in data.item">
                                <td class="time">{{i.time}} <i class="ico ico-arrow-transfer"></i> <b class="txt-red">{{i.number}}</b></td>
                                <td class="user">
                                    <div class="f-breakword"><a class="goUserPage" href="javascript:;">{{i.username}}</a></div>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="m-calc-result">
                        <p class="m-calc-result-title">计算结果</p>
                        <p class="m-calc-result-code">幸运号码：<b class="txt-red">{{data.luckly_number}}</b></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="pro-mask" id="calcTip" style="display: none;" v-show="showCalc">
            <div class="w-msgbox">
                <div class="w-msgbox-close" data-hide="#calcTip" @click="showCalc=false">×</div>
                <div class="w-msgbox-bd">
                    <h3 class="w-msgbox-title"></h3>
                    <div style="font-size: 12px;">
                        <p style="font-size: 13px; margin-bottom: 10px; font-weight: bold;">幸运号码计算方式：</p>
                        <p style="margin-bottom: 10px;"><b>1.</b> 商品的最后一个号码分配完毕后，将公示该分配时间点前本站全部商品的最后50个参与时间；</p>
                        <p style="margin-bottom: 10px;"><b>2.</b> 将这50个时间的数值进行求和（得出数值A）（每个时间按时、分、秒、毫秒的顺序组合，如20:15:25.362则为201525362）；</p>
                        <p style="margin-bottom: 10px;"><b>3.</b> 数值A 除以该商品总需人次得到的余数 + 原始数&nbsp;10000001，得到最终幸运号码，拥有该幸运号码者，直接获得该商品。</p>
                    </div>
                </div>
                <div class="w-msgbox-ft w-msgbox-ft-1">
                    <button class="pro-btn" type="button" data-hide="#calcTip" @click="showCalc=false"><span>确定</span></button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import headerComponent from '../components/header'
    import Goods from '../module/goods'
    module.exports = {
        data() {
            return {
                data:{},
                id:'',
                pageName:'计算结果',
                show:false,
                showCalc:false
            }
        },
        components: {

            headerComponent

        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {

            if (!!this.$route.query.id) {

                this.id = this.$route.query.id;

            } else {

                history.go(-1);
                return;

            }
            let res = await Goods.getCheckCalculateDetail(this.id);

            this.data = Object.assign({},this.data,res);

            this.$dispatch('isLoading', false);

        },
        beforeDestroy() {

        },
        methods: {}
    }
</script>
